<template>
  <nav-bar class="bar" left-arrow @click-left="onClickLeft">
    <template #right>
      <Search
        class="sch"
        v-model="keyword"
        show-action
        label="郑州市"
        placeholder="输入位置、地标、房源标题"
        @search="onSearch"
      >
      </Search>
      <!-- <field  v-model="value"
    clearable  placeholder="输入位置、地标、房源标题" /> -->
      <!-- <icon name="search" size="18" /> -->
    </template>
  </nav-bar>
  <dropdown-menu>
    <dropdown-item v-model="value1" :options="option1" @click="byType" />
    <dropdown-item v-model="value2" :options="option2" @click="byNumber" />
    <dropdown-item v-model="value3" :options="option3" @click="byPrice" />
    <!-- <dropdown-item v-model="value4" :options="option4" /> -->
  </dropdown-menu>
  <div id="search">
    <grid :gutter="16" :column-num="1" id="lists">
      <grid-item v-for="i in lists" :to="{ name: 'Detail', query: {id: i.id}}">
        <Image :src="i.picture" />
        <p>
          {{ i.homestaysName }} {{i.homestaysTitle}}￥{{ i.price }} {{ i.roomType }}
          {{ i.personNumber }}人
        </p>
        <p>{{i.intro}}</p>
      </grid-item>
    </grid>
    <!-- <List></List> -->
  </div>
</template>
<script setup>
import { ref } from "vue";
import List from "../components/List.vue";
import { getList } from "../utils/api";
import { searchHotelAPI } from "../services/hotel";
import {
  NavBar,
  Icon,
  Field,
  Image,
  Search,
  Toast,
  Grid,
  GridItem,
  DropdownMenu,
  DropdownItem,
} from "vant";

const onClickLeft = () => history.back();
const keyword = ref("");
const lists = ref([]);

allLists();
function allLists() {
  getList().then((res) => {
    lists.value = res.data;
    console.log(res.data);
  });
}
// function
function byNumber() {
  getList().then((res) => {
    if (value2.value == "b") {
      lists.value = res.data.filter((item) => item.personNumber == 1);
    }
    if (value2.value == "c") {
      lists.value = res.data.filter((i) => i.personNumber == 2);
    }
    if (value2.value == "d") {
      lists.value = res.data.filter((i) => i.personNumber >= 3);
    }
    console.log(lists.value);
  });
}
function byPrice() {
  getList().then((res) => {
    if (value3.value == "p") {
      lists.value = res.data.filter((i) => i.price <= 200);
    }
    if (value3.value == "q") {
      lists.value = res.data.filter((i) => i.price > 200 && i.price < 500);
    }
    if (value3.value == "r") {
      lists.value = res.data.filter((i) => i.price >= 500);
    }

    console.log(lists.data);
  });
}
function byType() {
  getList().then((res) => {
    if (value1.value == "1") {
      lists.value = res.data.filter((i) => i.roomType == "标准房");
    }
    if (value1.value == "2") {
      lists.value = res.data.filter((i) => i.roomType == "大床房");
    }
    if (value1.value == "3") {
      lists.value = res.data.filter((i) => i.roomType == "情侣房");
    }
    if (value1.value == "4") {
      lists.value = res.data.filter((i) => i.roomType == "三人房");
    }

    console.log(res.data);
  });
}

const onSearch = (val) =>
  getList().then((res) => {
    lists.value = res.data.filter(
      (item) =>
        item.homestaysName.indexOf(val) > -1 ||
        item.city.indexOf(val) > -1 ||
        item.area.indexOf(val) > -1 ||
        item.homestaysTitle.indexOf(val) > -1
    );
    console.log(lists.value);
    keyword.value = "";
  });
/* const onSearch = (val)=>{
  searchHotelAPI(val).then((res)=>{
    lists.value = res.data;
  })
} */

const value1 = ref(0);
const value2 = ref("a");
const value3 = ref("o");
const option1 = [
  { text: "全部类型", value: 0 },
  { text: "标准房", value: 1 },
  { text: "大床房", value: 2 },
  { text: "情侣房", value: 3 },
  { text: "三人房", value: 4 },
];
const option2 = [
  { text: "人数", value: "a" },
  { text: "1人", value: "b" },
  { text: "2人", value: "c" },
  { text: "3人及以上", value: "d" },
];
const option3 = [
  { text: "价格", value: "o" },
  { text: "200以内", value: "p" },
  { text: "200-500", value: "q" },
  { text: "500以上", value: "r" },
];
</script>
<style scoped>
#search {
  /* background-color: #eee; */
  overflow: auto;
}

.bar {
  /* padding: 1%; */
  height: 5vh;
}
.sch {
  padding: 2%;
  width: 80vw;
}
#lists {
  overflow: auto;
}
</style>
